<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
<title></title> 
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/scrollbar/scrollbar.css"/>
<link rel="stylesheet" href="script/jqm/css/jquery.mobile-1.4.2.min.css"/>
<script src="script/jqm/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="script/jqm/js/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>

</head> 
<body> 
<div data-role="page" id="homepage" data-dom-cache="true">
<style type="text/css"> 
ul li{padding:0px;margin:0px;}

.content_l{}
.content_l li{border:1px solid #ccc;height:100px;}
.menubar{position:absolute;width:100%;}
</style> 
<div data-role="header" style='background:#0f5b8f;' data-position="fixed" data-tap-toggle="false">
 <a href='#leftNav' class='navicon fl' data-iconpos='notext'>sdsdsd</a>
	  <div class="menubar">
	    <ul class="navbar">
	        <li id="c1" class="btn-active"><a href="#">11</a></li>
	        <li id="c2"><a href="#" >12</a></li>
	        <li id="c3"><a href="#">13</a></li>
	        <li id="c4"><a href="#">14</a></li>
	        <li id="c5"><a href="#">15</a></li>
	        <li id="c6"><a href="#">16</a></li>
	        <li id="c7"><a href="#">17</a></li>
	    </ul>
	 </div>
 </div>
    <div data-role="content" style="margin-top:30px;" id="swiper">
         <ul class="content_l" name="c1">
            <li>111111111</li>
			<li>1111111111</li>
			<li>11111111111</li>
			<li>111111111</li>
         </ul>
         <ul class="content_l" name="c2" style="display:none">
			<li>222222222</li>
			<li>22222222222</li>
			<li>222222222</li>
			<li>22222222222</li>
         </ul>
         <ul class="content_l" name="c3" style="display:none">
			<li>33333333333</li>
			<li>3333333333333</li>
			<li>3333333333333</li>
			<li>33333333333</li>
         </ul>
         <ul class="content_l" name="c4" style="display:none">
			<li>4444444444</li>
			<li>444444444444444</li>
			<li>44444444444444</li>
			<li>444444444444</li>
         </ul>
                  <ul class="content_l" name="c5" style="display:none">
			<li>555555555555</li>
			<li>5555555555555</li>
			<li>55555555555</li>
			<li>5555555555555</li>
         </ul>
                  <ul class="content_l" name="c6" style="display:none">
			<li>666666666666</li>
			<li>6666666666666</li>
			<li>66666666666666</li>
			<li>66666666666666</li>
         </ul>
                  <ul class="content_l" name="c7" style="display:none">
			<li>77777777777</li>
			<li>77777777777</li>
			<li>777777777777</li>
			<li>77777777777</li>
         </ul>
    </div>
	<div data-role="panel" id="leftNav" data-position-fixed="true">
      <div class="ui-panel-inner"> 
           <div class="menu-head">
            <div class="logn-nav">
		         <img src="image/logo-nav.png" width="180" height="45"/>
			</div>
			<div class="hd-line"></div>
			<table class="menus">
				<tr onClick="loadHome(this)">
				    <td class="menus-l"><span class="sign"></span></td>
				 	<td class="menus-m">
				 		<img src="image/sysz.png" class="nav-img">
				 	</td>
				 	<td>首页工作台</td>
			     </tr>
			 </table>
			 <div class='hd-line'></div>
           </div>
      	   <div id="navmenu" class="menu-mid"></div>
      	   <div class="menu-foot">
      	   	     <table class="bar">
				     <tr>
				        <td class="bar-l" onclick="exitApp()">
					          <img src="image/zxdl.png" width="20px" align="center" height="20px"/>
					          <span>退出系统 </span>         
				        </td>
				        <td class="bar-r" onclick="CancellApp()"> 
				              <img src="image/tcdl.png" align="center" width="20px" height="20px"/>
				              <span>注销登陆 </span>
				        </td>
				     </tr>
		          </table>  
      	   </div>
      </div>
    </div>

    <script type="text/javascript"> 
	 $(document).on( "pagecreate", function() {
			$( "body > [data-role='panel']" ).panel();
			$( "body > [data-role='panel'] [data-role='listview']" ).listview();
    });
/*     $(".navbar").bind("swiperight", function(event) {
    	var offset=$("[data-role='menubar']").offset();
    	var left = offset.left;
    	if(left<0){
    		$("[data-role='menubar']").animate({left : '+='+100 },0); 
    	}
    }).bind("swipeleft", function(event) {
    	var offset=$("[data-role='menubar']").offset();
    	var left = offset.left;
    	var screen=$(window).width();
    	var menubar=$("[data-role='menubar']").width();
    	if(menubar-screen+left>0){
    		$("[data-role='menubar']").animate({left : '-='+100 },0); 
    	}
    	
    }) */
     
    $("[data-role='content']").bind("swiperight", function(event) {
    	   var prev=$(".btn-active").attr("id");
		   var next=$(".btn-active").prev("li").attr("id");
		   alert(prev+":"+next)
		   if(next==undefined){   
			  // $("[data-role='panel']").panel('open');
			  // $("[data-role='header']").removeClass("ui-header ui-bar-inherit ui-header-fixed slidedown ui-panel-fixed-toolbar ui-panel-page-content-open").addClass("ui-header ui-bar-inherit ui-header-fixed slidedown");
		   }
		   else if(next!=undefined){
 			   $(".navbar li").removeClass("btn-active");
 			   $("#"+next).attr("class","btn-active");
			   $("[name='"+prev+"']").hide();
               $("[name='"+next+"']").show();
		   }
		 }).bind("swipeleft", function(event) {
			 var prev=$(".btn-active").attr("id");
			 var next=$(".btn-active").next("li").attr("id");
			 $("#leftNav").panel('close');
			 if(next!=undefined){
			   $(".navbar li").removeClass("btn-active");
               $("#"+next).attr("class","btn-active");
               $("[name='"+prev+"']").hide();
               $("[name='"+next+"']").show();
			 }
	   }); 
    
</script> 
</div>

</body> 
</html>